<template>
  <div>
    <div>这是子组件，用于测试父子通信的</div>
    <div>这是父组件传过来的值：{{ fatherMoney }}、{{ fatherString }}</div>
    <p>点击修改父组件传过来的数：<button @click="handleChangeMoney">点击修改为555</button></p>
    <p>点击修改父组件传过来的数：<button @click="handleChangeString">点击修改为 耶耶耶</button></p>
    <p>点击全部修改父组件传过来的数：<button @click="handleChangeAll">点击修改两个数据</button></p>
  </div>
</template>

<script setup>
  // 父传子
  // 通过 defineProps 获取父组件传过来的值：
  // 注意需要加类型，否则会报错未定义
  const props = defineProps({
    // fatherMoney: Number,
    // 也可以使用默认值的方式，即当父组件没有传过来一个实际值的时候，子组件采用默认值
    fatherMoney: {
      type: Number,
      default: 10
    },
    fatherString: String
  })

  // 注意：在子组件中拿到的数据，可以直接在 html 模版中使用，但是无法在 js 中使用
  // 因此需要接收 defineProps 的值
  console.log('子组件接收父组件的值：', props)
  console.log('子组件接收父组件的值：', props.fatherMoney)


  // 子传父：
  // 通过 defineEmits 获取方法，注意是数组里面加名字字符串
  const emit = defineEmits(['changeFatherMoney', 'changeFatherString', 'changeAll'])
  const handleChangeMoney = () => {
    emit('changeFatherMoney', 555)
  }

  const handleChangeString = () => {
    emit('changeFatherString', '耶耶耶')
  }

  const handleChangeAll = () => {
    emit('changeAll', 666, '啦啦啦')
  }

</script>

<style scoped></style>